<template>
	<view class="page">
		<view class="form">
			<view class="inp">
				<input type="number" v-model="phone" placeholder="请输入手机号" placeholder-style="color:#BEC0C4;">
			</view>
			<view class="inp">
				<input type="number" v-model="sms_code" placeholder="请输入验证码" placeholder-style="color:#BEC0C4">
				<view class="code" @click="getSMS" v-if="!isSMS">获取验证码</view>
				<view class="code" @click="getSMS" v-if="isSMS">{{countdown}}s</view>
			</view>
			<view class="btn-box">
				<button class="btn" @click="userLogin">立即绑定</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	export default {
		data(){
			return {
				countdown: 60,
				isSMS: false,
				phone: '',
				sms_code: '',
				isRadio: '',
				urlList: {}
			}
		},
		methods: {
			getAgreement() {
				request.http(
				{
					url: Api.agreement,
					type: 'GET',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						//  'token':uni.getStorageSync('token'),
					},
					data: {},
					}).then(result=>{
						
						this.urlList = result.data
					})
			},
			getSMS(){
				if(this.phone == '') {
					uni.showToast({
						title:'请输入手机号',
						icon: "none"
					})
					return
				}
				
				request.http(
				{
					url: Api.getCode,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						//  'token':uni.getStorageSync('token'),
					},
					data: {
						cate: 3,
						phone: this.phone
						},
					}).then(result=>{
						this.setTime()
						this.isSMS = true
					})
			},
			setTime(val) {
				   let that=this;
				   
					if(this.countdown==0){
					this.countdown=60;
					clearTimeout(that.timeClock)
					this.isSMS = false
					}else{
					this.countdown--;
					this.timeClock=setTimeout(()=>{
					that.setTime();   
					},1000)
				   }
			},
			userLogin () {				
				if(this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
			
				request.http(
					{
						url: Api.binding,
						type: 'POST',
						header: {
							// 'content-type': 'application/x-www-form-urlencoded',
							'token':uni.getStorageSync('token')
						},
						data: {
							cate: 3,
							phone: this.phone,
							sms_code:this.sms_code,
							source: 1
						},
						}).then(result=>{
							uni.setStorageSync('account_hid', result.data.hid)
							this.createLog()
						})
			},
			createLog() {
				// 创建挂载记录
				request.http({
					url:Api.mount_create,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'POST',
					data: {
						account_hid: uni.getStorageSync('account_hid')
					},
				}).then(res => {
					uni.navigateTo({
						url:'/subPackage/personal/mount?mount_log_hid='+ res.data.hid
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background: #fff;
		.bg {
			width: 100%;
			height: 434rpx;
			position: relative;
			.text-box {
				position: absolute;
				bottom: 60rpx;
				left: 57rpx;
				.welcome {
					font-size: 58rpx;
					font-weight: 600;
					color: #222526;
					margin-bottom: 21rpx;
				}
				.small{
					font-size: 24rpx;
					font-weight: 400;
					color: #222526;
				}
			}
		}
		.form {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 57rpx;
			box-sizing: border-box;
			.inp {
				height: 100rpx;
				border-bottom: 1rpx solid #DCDDE0;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				input {
					flex: 1;
					font-size: 29rpx;
				}
				.code {
					font-size: 29rpx;
					font-weight: 400;
					color: #3075FE;

				}
			}
			
			.btn-box {
				width: 100%;
				margin-top: 50rpx;
				.btn {
					width: 634rpx;
					height: 80rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-weight: 400;
					color: #FFFFFF;
					font-size: 27rpx;
					line-height: 80rpx;
				}
			}
		}
		
		.rule {
			display: flex;
			font-size: 22rpx;
			font-weight: 400;
			color: #6E7175;
			justify-content: center;
			margin-top: 40rpx;
			align-items: center;
			
			.btn {
				color:  #3075FE
			}
		}
	}
</style>